<!DOCTYPE html>
<html>
<head lang="en">
    <meta http-equiv="Cache-Control" content="no-cache" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
    <title>门店顾客查询系统</title>
    <style>
        [v-cloak] {
          display: none;
        }

        b,body,button,dd,div,dl,dt,h1,h2,h3,h4,h5,h6,html,i,img,li,ol,p,span,ul {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 0;
    outline: 0
}


        .am-body-inner{
    margin-bottom: 40px;
}
.am-body-inner .barberDetail_base {
    position: relative;

}
.am-body-inner .barberDetail_base .blurwrap {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: .5;

}
.am-body-inner .barberDetail_base{
    position: relative;
    background: #000;
}
.am-body-inner .barberDetail_base .blurwrap img{
    height: 100%;
    width: 100%;
}
.am-body-inner .am-header {
    max-width: 100%;
    height: 44px;

    position: relative;
}
.am-body-inner .am-header .button {
    height: 44px;
    width: 44px;
    position: absolute;
    line-height: 44px;
    display: inline-block;
    text-align: center;
}
.am-body-inner .barberDetail_base .shareIcon {
    width: 30px;
    height: 30px;
    float: right;
    margin: 7px;
}
.am-body-inner .am-header .right {
    top: 0;
    right: 0;
}
.am-body-inner  .barberDetail_base .am-header>p {
    font-size: 22px;
    color: #fff;
}

.am-body-inner .am-header>p {
    font-size: 18px;
    line-height: 44px;
    height: 44px;
    margin: 0 44px;
    font-weight: 700;
}

.am-body-inner .am-header .tab>li, .am-header>p {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.am-body-inner .am-drag, .am-header p {
    text-align: center;
}
.am-body-inner  .barberDetail_base .barberImgWrap {
    position: absolute;
    bottom: -2px;
    left: 50%;
    margin-left: -45px;
    background-color: rgba(255,255,255,.4);
    width: 90px;
    height: 90px;
    padding: 3px;
    border-radius: 50%;
    z-index: 1;
}
.am-body-inner  .barberDetail_base .barberImg {
    width: 90px;
    height: 90px;
    overflow: hidden;
    border-radius: 50%;
}
.am-body-inner  .barberDetail_base .barberImg img {
    width: 100%;
        height:100%;
    display: block;
    border-radius: 50%;
}
.am-body-inner  .barberDetail_base .textwrap li {
    position: absolute;
    font-size: 12px;
    line-height: 18px;
    color: #fff;
    padding: 0 8px;
    border: 1px solid #fff;
    border-radius: 15px;
}
.am-body-inner  .barberDetail_base .barberbottom {
    position: absolute;
    bottom: -10px;
    width: 100%;
    height: 24px;
    background: url(../../image/jiebao/barberbottom.png) 0 -2px no-repeat;
    background-size: cover;
}
.am-body-inner  .barberDetail_text {
    height: 53px;
    padding: 3px 10px 0;
        background-color: white;
}
.am-body-inner  .barberDetail_text .name {
    font-size: 22px;
    font-weight: 700;
    color: #000;
    padding: 4px 0;
}
.am-body-inner  .barberDetail_text .level {
    float: left;
    font-size: 12px;
    color: #999;
}
.am-body-inner  .barberDetail_text .price {
    float: right;
    font-size: 13px;
    color: #ff2146;
}
.am-body-inner  .barberDetail_text .price strong {
    margin-left: 5px;
    font-size: 15px;
    font-weight: 400;
}
.am-body-inner  .barberDetail {
    padding: 0;
    background-color: #FFF;
}
.am-body-inner  .barberDetail .comment_desc {
    font-size: 14px;
    padding: 10px;
    line-height: 20px;
    color: #888;
}
.am-body-inner  .comment_desc_view {
    position: relative;
    height: 20px;
    line-height: 20px;
    font-size: 14px;
    color: #000;
    padding-right: 10px;
}
.namelevel,  .addresstel .addresstelinner .bottom,  .barberDetail .level,  .barberDetail_base .name,  .comment_desc_view {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.am-body-inner  .comment_desc_view .arrowmore {
    display: block;
    width: 10px;
    height: 20px;
    position: absolute;
    right: 0;
    top: 0;

}
.am-body-inner  .barberDetail .actions {
    border-top: 1px solid #EEE;
    border-bottom: 1px solid #EEE;
    height: 60px;
    text-align: center;
    display: -webkit-box;
    -webkit-box-orient: horizontal;
}
.am-body-inner  .barberDetail .actions div {
    -webkit-box-flex: 1;
}
.am-body-inner  .barberDetail .actions .num {
    height: 22px;
    line-height: 22px;
    color: #222;
    display: inline-block;
    font-size: 16px;
    padding: 10px 0 0;
}
.am-body-inner  .barberDetail .actions .text {
    color: #999;
    font-size: 12px;
}

.am-body-inner  .archive_box .cont li {
    position: relative;
    width: 80px;
    height: 80px;
    display: inline-block;
    margin: 5px;
}
.am-body-inner  .archive_box .cont li span {
    position: absolute;
    right: 4px;
    top: 4px;
    font-size: 12px;
    width: 24px;
    height: 18px;
    text-align: center;
    line-height: 18px;
    color: #fff;

}
.am-body-inner  .archive_box .cont li img {
    width: 100%;
    height: 100%;
}
.am-body-inner  .greydiv {
    height: 10px;
    background-color: #f5f5f5;
}

.am-body-inner  .barberDetail_box .tit .pj{
    display: inline-block;
    width: 35px;
}

.am-body-inner  .barberDetail_box .tit p {
    float: left;
}
.am-body-inner .barberDetail_box .tit .zp {
    display: inline-block;
    width:35px;


}
.am-body-inner  .comment_box .tit .tit_right {
    width: 100px;
    text-align: right;
    background-position: 101px -302px;

    float: right;
    font-size: 12px;
    color: #999;
    padding-right: 10px;

}
.am-body-inner  .reservationBtnGroup {
    height: 40px;
    position: fixed;
    bottom: 0;
    border-top: 1px solid #EDEDED;
    right: 0;
    left: 0;
    display: -webkit-box;
    -webkit-box-orient: horizontal;
    font-size: 14px;
}
.am-body-inner  .reservationBtnGroup .rewardBtn {
    background: #FFF;
    text-align: center;
    line-height: 38px;
}


.am-body-inner  .reservationBtnGroup div {
    -webkit-box-flex: 1;
        width:50%;
}
.am-body-inner .reservation {
    background: #ff2146;
    border: 1px solid #ff2146;
    text-align: center;
    line-height: 38px;
    color: #FFF;
}


    </style>

</head>
<body>
    <div class="am-body-inner" id="box" v-cloak>
        <div class="barberDetail_base">
            <div class="am-header" style="height:132px">
                <p>美易通客户客户查询界面</p>
                <p style="font-size:16px;margin-bottom:0px;height: 30px">{{shopinfo.name}}</p>
                <p style="font-size:14px">{{shopinfo.address}}</p>
                
            </div>
        </div>
        
        <div class="barberDetail">
            <div class="comment_desc">
                <div class="comment_desc_view am-clickable autoheight">请输入查询的手机号码<span class="arrowmore"></span></div>
            </div>
            <div class="actions">
                <div class="archiveTimes" style="padding: 10px;">
                    <input type="text" v-model="phone" placeholder="请输入手机号码" style="height: 30px;border-radius: 3px;border: 1px solid #8b8b92;padding: 0px 10px;">
                </div>
            </div>
            
            <div v-show="ginfo.id" style="font-size:12px;margin-bottom:20px;padding-bottom:20px">
                <div>
                    <p style="padding: 5px 0px;text-align: center; padding: 5px 0px">客户信息</p>
                    <div style="padding:0px 20px">
                        <p>姓名：${ginfo.name} &nbsp;&nbsp;&nbsp;&nbsp;  电话：${ginfo.phone}</p>
                        <p>余额：${ginfo.balance} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   赠送余额：${ginfo.giftbalance}</p>
                    </div>       
                </div>
                <div>
                    <p style="padding: 5px 0px;text-align: center; padding: 5px 0px">卡项信息</p>
                    <ul>
                        <li style="padding: 0px 30px">   
                            <div style="height:16px">
                                <span style="display:inline-block;float:left;width:50%">名称</span>
                                <span style="display:inline-block;float:left;width:15%">类型</span>
                                <span style="display:inline-block;float:left;width:15%">剩余次数</span>
                                <span style="display:inline-block;float:left;width:20%">到期时间</span>
                            </div>
                            
                        </li>
                        <li v-for="s in guestSubjectInfo" style="padding: 0px 10px">
                            <div style="height:16px">
                                <span style="display:inline-block;float:left;width:50%">${s.sname}</span>
                                <span style="display:inline-block;float:left;width:15%">${s.cardtype == 1 ? '期卡': '次卡'}</span>
                                <span style="display:inline-block;float:left;width:15%">${s.cardtype == 1 ? '不限' : s.nownum}</span>
                                <span style="display:inline-block;float:left;width:20%">${s.cardtype == 1 ? times(s.endtime) : '用完为止'}</span>
                            </div>
                            
                        </li>
                    </ul>
                </div>
                <div >
                    <p style="padding: 5px 0px;text-align: center; padding: 5px 0px">暂存商品</p>
                    <ul>
                        <li style="padding: 0px 30px">   
                            <div style="height:16px">
                                <span style="display:inline-block;float:left;width:60%">名称</span>
                                <span style="display:inline-block;float:left;width:20%">剩余数量</span>
                                <span style="display:inline-block;float:left;width:20%">是否赠送</span>
                            </div>
                            
                        </li>
                        <li v-for="s in guestGoodsInfo" style="padding: 0px 10px">
                            <div style="height:16px">
                                <span style="display:inline-block;float:left;width:60%">${s.gname}</span>
                                <span style="display:inline-block;float:left;width:20%">${s.nownum}</span>
                                <span style="display:inline-block;float:left;width:20%">${s.isgift == 0 ? '否' : '是'}</span>
                            </div>
                            
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="am-placeholder reservationBtnGroup">
            <div class="reservation am-clickable" @click="chaxun()"><i class="aui-iconfont aui-icon-like" style="font-size:12px;padding-right:6px;"></i>查询</div>
        </div>
    </div>
</body>
<script type="text/javascript" src="/static/admin/eleme/vue.js"></script>
<script src="/static/admin/js/jquery.min.js"></script>
<script type='text/javascript'>
var shopid = {{shopinfo.s_id}};
var vm;
vm = new Vue({
    el: '#box',
    data: {
        shopid: shopid,
        phone: '',
        ginfo: '',
        guestSubjectInfo: '',
        guestGoodsInfo: ''
    },
    methods: {
        chaxun: function () {
            // 正则过滤
            if (!/^1[3587]\d{9}$/.test(this.phone)) {
                alert('手机号码格式不正确')
                return false
            }

            let that = this
            $.ajax({
                type: 'post',
                url: '/guest/index/getguestinfo',
                data: {"phone":this.phone,"shopid":this.shopid},
                success: function(ret) {
                    if (ret.success == 0) {
                        alert(ret.info)
                    } else {
                        // 加载客户信息
                        that.ginfo = ret.guest
                        that.guestSubjectInfo = ret.guestSubjectInfo
                        that.guestGoodsInfo = ret.guestGoodsInfo
                        // alert(JSON.stringify(ret))
                    }
                },
                error: function(err) {
                    // alert(JSON.stringify(err));
                }
            });
        },
        times (unix) {
            let tm = unix?new Date(unix*1000):new Date();
            let yy = tm.getFullYear();
            let mm = tm.getMonth()<9?'0'+(tm.getMonth()+1):tm.getMonth()+1;
            let dd = tm.getDate()<10?'0'+tm.getDate():tm.getDate();
            return yy+'-'+mm+'-'+dd;
        }
    },
    delimiters:['${', '}'],
});
//跳转到手机验证页面
</script>
</html>
